<template>
  <div id="app">
    <main>
      <div v-for="(item,index) in foot" :key="index">
        <div :is='item.name' v-if='index==activeIndex'></div>
      </div>
    </main>
    <footer>
      <Footer :foot='foot' :activeIndex='activeIndex'></Footer>
    </footer>
  </div>
</template>

<script>
import Footer from './components/Footer.vue'
import Buy from './components/body/Buy.vue';
import Get from './components/body/Get.vue';
import My from './components/body/My.vue';
import Service from './components/body/Service.vue';

export default {
  name: 'App',
  components: {
    Footer,
    Buy,
    Get,
    My,
    Service
  },
  data(){
    return{
      activeIndex:0,
      foot:[{
        name:'Get',
        title:'得物'
      },{
        name:'Buy',
        title:'购买'
      },{
        name:'Service',
        title:'服务'
      },{
        name:'My',
        title:'我的'
      }]
    }
  },
  mounted(){
    this.bus.$on('changeActive',(index)=>{
      this.activeIndex=index
    })
  }
}
</script>

<style>
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
html,body,#app{
  width: 100%;
  height: 100%;
}
#app{
  display: flex;
  flex-direction: column;
}
#app main{
  flex: 1;
  overflow-y: scroll;
}
#app footer{
  width: 100%;
  height: 60px;
  background: #09f;
}
footer ul{
  height: 100%;
  display: flex;
  justify-content: space-around;
  align-content: center;
  line-height: 60px;
}
</style>
